<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tab {
        width: 800px;
        margin: 100px auto;
        display: flex;
        flex-direction: column;
    }

    .tab ul li {
        padding: 15px 20px;
        background: #eff0ef;
        float: left;
        cursor: pointer;
        color: #000;
        font-weight: bold;
        border-bottom: 1px solid #d72720;
    }

    .tab_con {
        font-weight: bold;
    }

    .tab_list .current {
        background: #d72720;
        color: #fff;
    }

    .item {
        display: none;
    }
</style>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(2222)</li>
                <li>手机社区</li>
            </ul>

        </div>
        <div class="tab_con">
            <div class="item" style="display:block">
                商品介绍模块
            </div>
            <div class="item">
                规格与包装模块
            </div>
            <div class="item">
                售后保障模块
            </div>
            <div class="item">
                商品评价模块
            </div>
            <div class="item">
                手机社区模块
            </div>

        </div>
    </div>
    <script>
        //一共有两个模块
        //上面的模块选项卡：点击某一个，这个背景色变成红色，其余的不变。利用排他思想
        //下面的选中模块：会跟随上面的选项卡变化，所以下面的模块变化写到点击事件里面去
        //规律：下面的模块显示和上面的选项卡一一对应
        //核心思路：给上面的选项卡添加自定义属性index，值从0开始
        //当我们点击选项卡的时候，下面对应的div一一显示，其余的隐藏

        //先获取到元素
        var lists = document.querySelector(".tab_list");
        var lis = lists.querySelectorAll("li");
        var items = document.querySelectorAll(".item")

        //给获取到的元素添加注册事件
        //先for循环获取到每一个lis中的元素也就是li
        //然后利用排他思想，当点击这个li的时候，颜色是红色，其他的不变色

        for (var i = 0; i < lis.length; i++) {
            //先给每一个li设置自定义属性index,index的值是从0开始
            lis[i].setAttribute('index', i)
            //循环遍历完每一个元素后，给其中的一个元素添加点击事件
            lis[i].onclick = function () {
                //利用排他思想，先干掉其他的li
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                this.className = 'current' //直接加类名就行，不用加句号

                //2、显示下面的div内容
                //（1）、先给每一个li设置自定义属性index,index的值是从0开始,然后打印输出看一下有没有获取到这个Index
                var index = this.getAttribute('index');
                //    console.log(index);
                
         
                //（2）、利用排他思想，隐藏其他元素
                for( var i = 0; i < items.length; i++){
                    items[i].style.display = 'none'

                }
                //（3）、先获取到div，根据div的索引号来与选项卡的index的值一一对应，然后显示出来就行
                items[index].style.display = 'block'
                
            }

        }




    </script>
</body>

</html>